import {useState} from 'react'
import { Card, Button, Input, Space } from 'antd'

const { TextArea } = Input;


const UrlDecode:React.FC = () => {

    const [srcVal, setSrcVal] = useState('')
    const [targetVal, setTargetVal] = useState('')

    const onChange = (val:string) => {
        if (!val) {
            return
        }
        setSrcVal(val)
    }

    const onClick = (type:number) => {
        switch (type) {
            case 1:
                setTargetVal(encodeURIComponent(srcVal))
                break;

            case 2:
                setTargetVal(decodeURIComponent(srcVal))
                break;

            case 3:
                setTargetVal(encodeURI(srcVal))
                break;

            case 4:
                setTargetVal(decodeURI(srcVal))
                break;
            default:
                break;
        }
    }

    return (
        <div>
            <Card>
                 <TextArea onChange={e => onChange(e.target.value)} value={srcVal} style={{ height: 100, resize: 'none'}} placeholder='请输入' />
                <div style={{textAlign: "center", margin: "10px 0"}}>
                    <Space>
                        <Button type="primary" onClick={() => onClick(1)}>编码(encodeURIComponent)</Button>
                        <Button onClick={() => onClick(2)}>解码(decodeURIComponent)</Button>
                        <Button type="primary" onClick={() => onClick(3)}>编码(encodeURI)</Button>
                        <Button onClick={() => onClick(4)}>解码(decodeURI)</Button>
                    </Space>
                </div>
                <TextArea readOnly value={targetVal} style={{ height: 100, resize: 'none'}} />

            </Card>
        </div>
    )
}

export default UrlDecode